<template>
  <div class="city-box">
    <div class="city-list">
      <!-- 定位/最近/热门 -->
      <ul>
        <li v-for="group in groupCities" :key="group.title">
          <h3>{{group.title}}</h3>
          <div>
            <div v-for="city in group.cities" :key="city.name">{{city.name}}</div>
          </div>
        </li>
        <!-- A-Z -->
        <li v-for="letter in indexCities" :key="letter.title">
          <h3>{{letter.title}}</h3>
          <div>
            <div v-for="city in letter.cities" :key="city.nm">{{city.nm}}</div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 右侧悬浮 -->
    <div class="index-list">
      <ul>
        <!-- 定位/最近/热门 -->
        <li v-for="group in groupCities" :key="group.title ">{{group.title|extractWord}}</li>
        <!-- A-Z -->
        <li v-for="letter in indexCities" :key="letter.title">{{letter.title|toUpperCase}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getCities } from "../api/index";
export default {
  filters: {
    extractWord: function(title) {
      return title.slice(0, 2);
    },
    toUpperCase: function(title) {
      return title.toUpperCase();
    }
  },
  components: {},
  props: {},
  data() {
    return {
      cities: [],
      groupCities: [
        {
          title: "最近访问城市",
          cities: [
            {
              name: "北京"
            }
          ]
        },
        {
          title: "热门城市",
          cities: [
            { name: "北京" },
            { name: "上海" },
            { name: "深圳" },
            { name: "广州" }
          ]
        }
      ]
    };
  },

  computed: {
    indexCities: function() {
      return this.sort(this.toArray(this.group(this.cities)));
    }
  },
  // watch: {
  //   indexCities: function(val) {
  //     console.log(JSON.stringify(val));
  //     console.log(val);
  //   }
  // },
  methods: {
    group: function(data) {
      var obj = {};
      data.forEach(city => {
        const firstLetter = city.py.charAt(0);
        if (!obj[firstLetter]) {
          obj[firstLetter] = [];
        }
        obj[firstLetter].push(city);
      });
      return obj;
    },
    toArray: function(data) {
      // {b:[],c:[],d:[]}
      var arr = [];
      for (var key in data) {
        arr.push({
          title: key,
          cities: data[key]
        });
      }
      // [{key:b,value:[],{key:c,value:[]}}]
      return arr;
    },
    sort: function(data) {
      return data.sort((a, b) => {
        return a.title.localeCompare(b.title);
      });
      // 返回:[{key:b ,value:[],{key:c,value:[]}}]
    }
  },
  async created() {
    const data = await getCities();
    // console.log(data);
    const { cts } = data;
    this.cities = cts;
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.city-box {
  position: relative;
  width: 100%;
  height: 100%;
  .city-list {
    position: relative;
    height: 100%;
    overflow: auto;
  }
  .index-list {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
  }
}
</style>